<template>
    <div class="intro" v-if="showSplash">
      <img src="../assets/shan.jpg" alt="" />
      <!-- 右上角的“跳过”按钮 -->
      <button @click="skipToHomePage">
        跳过<van-count-down :time="time" format="ss" />
      </button>
    </div>
  </template>
  
  <script setup>
  import { ref, onMounted } from "vue";
  import { useRouter } from "vue-router";
  const showSplash = ref(true);
  const router = useRouter();
  const timer = setTimeout(() => {
    checkAndNavigateToHomePage();
  }, 5000); 
  const time = ref(5000);
  // 清除定时器，当用户点击“跳过”时
  const skipToHomePage = () => {
    clearTimeout(timer);
    checkAndNavigateToHomePage();
  };
  const checkAndNavigateToHomePage = () => {
    // 检查用户ID
    const userId = localStorage.getItem("userId");
  
    if (userId) {
      router.push("/home"); // 如果有用户ID，则跳转到首页
    } else {
      router.push("/login"); // 如果没有用户ID，则跳转到登录页面
    }
    showSplash.value = false; // 隐藏引导页内容x
  };
  </script>

<style scoped>
  .intro {
    width: 100%;
    height: 100vh;
  }
  .intro img {
    width: 100%;
    height: 100%;
  }
  .intro button {
    position: absolute;
    top: 30px;
    right: 20px;
    border-radius: 15px;
    border: none;
    width: 60px;
    height: 25px;
    display: flex;
    align-items: center;
  }
  </style>